<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:composite="http://java.sun.com/jsf/composite">

    <composite:interface>

        <composite:attribute name="enabledDisabled"/>   
        <composite:attribute name="nameDisabled"/>  
        <composite:attribute name="dayDisabled"/>
        <composite:attribute name="monthDisabled"/>
        <composite:attribute name="emailAddressDisabled"/>
        <composite:attribute name="alternateEmailAddressDisabled"/>
        <composite:attribute name="telephoneNumberDisabled"/>
        <composite:attribute name="alternateTelephoneNumberDisabled"/>

        <composite:attribute name="nameRequired"/>
        <composite:attribute name="emailAddressRequired"/>

    </composite:interface>  

    <h:panelGrid columns="3"
                 columnClasses="columnWidth48, columnWidth4, columnWidth48"
                 width="90%"
                 style="margin-left: auto; margin-right: auto">

        <h:panelGrid columns="1"
                     columnClasses="columnWidth100"
                     rowClasses="rowAlign"
                     width="100%">

            <p:outputLabel value="#{bundle.Name}" 
                           for="name"/>

            <p:inputText id="name"
                         style="width: 100%; margin-top: 1.4%; margin-bottom: 1.4%"
                         value="#{personController.selected.name}"
                         tabindex="01"
                         disabled="#{cc.attrs.nameDisabled}"
                         required="#{cc.attrs.nameRequired}"/>      

            <p:outputLabel value="#{bundle.EmailAddress}" 
                           for="emailAddress"/>

            <p:inputText id="emailAddress" 
                         style="width: 100%; margin-bottom: 2%"
                         value="#{personController.selected.emailAddress}"
                         tabindex="04"
                         disabled="#{cc.attrs.emailAddressDisabled}"
                         required="#{cc.attrs.emailAddressRequired}"/>    

            <p:outputLabel value="#{bundle.TelephoneNumber}" 
                           for="telephoneNumber"/>

            <p:inputText id="telephoneNumber" 
                         style="width: 100%"
                         value="#{personController.selected.telephoneNumber}"
                         tabindex="06"
                         disabled="#{cc.attrs.telephoneNumberDisabled}"/>         

        </h:panelGrid>    

        <p:spacer/>

        <h:panelGrid columns="1"
                     columnClasses="columnWidth100"
                     rowClasses="rowAlign"
                     width="100%">

            <p:outputLabel value="#{bundle.Birthday}" 
                           for="birthday"/>      

            <h:panelGrid id="birthday"
                         columns="3"
                         columnClasses="columnWidth48, columnWidth4, columnWidth48"
                         width="100%">

                <h:panelGrid columns="2"
                             columnClasses="columnWidth50, columnWidth50"
                             rowClasses="rowAlign"
                             width="100%">

                    <p:outputLabel value="#{bundle.Month}"
                                   style="vertical-align: -22%"
                                   for="month"/>

                    <p:inputText id="month" 
                                 style="width: 100%"
                                 value="#{personController.selected.month}"
                                 tabindex="02"
                                 disabled="#{cc.attrs.monthDisabled}"/>  

                </h:panelGrid>         

                <p:spacer/>

                <h:panelGrid columns="2"
                             columnClasses="columnWidth50, columnWidth50"
                             rowClasses="rowAlign"
                             width="100%">

                    <p:outputLabel value="#{bundle.Day}" 
                                   style="vertical-align: -22%"
                                   for="day"/>

                    <p:inputText id="day" 
                                 style="width: 100%"
                                 value="#{personController.selected.day}"
                                 tabindex="03"
                                 disabled="#{cc.attrs.dayDisabled}"/>  

                </h:panelGrid>         

            </h:panelGrid>       

            <p:outputLabel value="#{bundle.AlternateEmailAddress}" 
                           for="alternateEmailAddress"/>

            <p:inputText id="alternateEmailAddress" 
                         style="width: 100%; margin-bottom: 2%"
                         value="#{personController.selected.alternateEmailAddress}"
                         tabindex="05"
                         disabled="#{cc.attrs.alternateEmailAddressDisabled}"/> 

            <p:outputLabel value="#{bundle.AlternateTelephoneNumber}" 
                           for="alternateTelephoneNumber"/>

            <p:inputText id="alternateTelephoneNumber" 
                         style="width: 100%"
                         value="#{personController.selected.alternateTelephoneNumber}"
                         tabindex="07"
                         disabled="#{cc.attrs.alternateTelephoneNumberDisabled}"/>        

        </h:panelGrid>    

    </h:panelGrid>

    <p:dialog header="#{bundle.AdditionalInfo}"
              widgetVar="additionalInfoDialog" 
              resizable="false" 
              modal="true" 
              showEffect="fade"
              hideEffect="fade" 
              draggable="false"
              width="48%"
              style="margin-left: auto; margin-right: auto">

        <h:panelGrid columns="3"
                     columnClasses="columnWidth48, columnWidth4, columnWidth48"
                     width="90%"
                     style="margin-left: auto; margin-right: auto">

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         rowClasses="rowAlign"
                         width="100%">

                <p:outputLabel value="#{bundle.Id}" 
                               for="id"/>

                <p:inputText id="id"
                             style="width: 100%; margin-bottom: 2%"
                             value="#{personController.selected.id}"
                             disabled="true"/>         

                <p:outputLabel value="#{bundle.CreatedBy}" 
                               for="createdBy"/>

                <p:inputText id="createdBy" 
                             style="width: 100%; margin-bottom: 2%"
                             value="#{personController.selected.createdBy.name}"
                             disabled="true"/>

                <p:outputLabel value="#{bundle.UpdatedBy}" 
                               for="updatedBy"/>

                <p:inputText id="updatedBy"   
                             style="width: 100%"
                             value="#{personController.selected.updatedBy.name}"
                             disabled="true"/>         

            </h:panelGrid>

            <p:spacer/>

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         rowClasses="rowAlign"
                         width="100%">

                <p:outputLabel value="#{bundle.Enabled}"
                               for="enabled"/>

                <p:selectBooleanCheckbox id="enabled"
                                         style="vertical-align: -22%; margin-bottom: 4%"
                                         value="#{personController.selected.enabled}"
                                         disabled="#{cc.attrs.enabledDisabled}"/>        

                <p:outputLabel value="#{bundle.Created}" 
                               for="created"/>

                <p:inputText id="created"
                             style="width: 100%; margin-bottom: 2%"
                             value="#{personController.selected.created}"
                             disabled="true">

                    <f:convertDateTime 
                        locale="#{localizationUtil.selected}" 
                        type="both"
                        pattern="#{localizationUtil.dateTimeFormatMediumPattern}" 
                        timeZone="#{localizationUtil.defaultTimeZone}"/>      

                </p:inputText>  

                <p:outputLabel value="#{bundle.Updated}" 
                               for="updated"/>

                <p:inputText id="updated"
                             style="width: 100%"
                             value="#{personController.selected.updated}"
                             disabled="true">

                    <f:convertDateTime 
                        locale="#{localizationUtil.selected}" 
                        type="both"
                        pattern="#{localizationUtil.dateTimeFormatMediumPattern}" 
                        timeZone="#{localizationUtil.defaultTimeZone}"/>

                </p:inputText>         

            </h:panelGrid>    

        </h:panelGrid>

    </p:dialog>     

</html>